<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>ECharts</title>
        <!-- 引入 echarts.js -->
        <script src="echarts.min.js"></script>
        </head>
        <body>
        <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
        <div id="main" style="width: 600px;height:400px;"></div>
        <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
 
        // 指定图表的配置项和数据
        var option = {
        		  title: {
        			    text: '男女买家各个年龄段交易对比',
        			    subtext: ' '
        			  },
        			  tooltip: {
        			    trigger: 'axis'
        			  },
        			  legend: {
        			    data: ['man', 'woman']
        			  },
        			  toolbox: {
        			    show: true,
        			    feature: {
        			      dataView: { show: true, readOnly: false },
        			      magicType: { show: true, type: ['line', 'bar'] },
        			      restore: { show: true },
        			      saveAsImage: { show: true }
        			    }
        			  },
        			  calculable: true,
        			  xAxis: [
        			    {
        			      type: 'category',
        			      // prettier-ignore
        			      data: ['0-18', '19-24', '25-29', '30-34', '35-39', '40-49', '>=50']
        			    }
        			  ],
        			  yAxis: [
        			    {
        			      type: 'value'
        			    }
        			  ],
        			  series: [
        			    {
        			      name: 'man',
        			      type: 'bar',
        			      data: [
        			        2287672, 2288667, 2290330, 2288380, 2288665, 2289942, 2289962
        			      ],
        			      markPoint: {
        			        data: [
        			          { type: 'max', name: 'Max' },
        			          { type: 'min', name: 'Min' }
        			        ]
        			      },
        			      markLine: {
        			        data: [{ type: 'average', name: 'Avg' }]
        			      }
        			    },
        			    {
        			      name: 'woman',
        			      type: 'bar',
        			      data: [
        			        2288739, 2287507, 2286380, 2287645,2289967, 2288150, 2287870
        			      ],
        			      markPoint: {
        			        data: [
        			          { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
        			          { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
        			        ]
        			      },
        			      markLine: {
        			        data: [{ type: 'average', name: 'Avg' }]
        			      }
        			    }
        			  ]
        			};

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        </script>
    </body>
</html>